<template>
  <el-container >
    <el-header style="border-bottom: 1px solid rgb(179 171 171);border-top: 1px solid rgb(179 171 171);height: 59px;z-index: 1000;padding: 0"  class="gradient-header">
      <el-menu ref="w3" style="width: 100%;"
       class="gradient-header1"
        mode="horizontal"
        @select="handleSelect"
        text-color="white"
        active-text-color="#fff" router>
        <el-menu-item class="green-on-click" ref="w1">
          <img src="../assets/gitee.png" style="width: 54px;">
          <span style="color: white;font-size: 20px;font-weight: bold;">Flow后台管理系统</span>
        </el-menu-item>
        <el-menu-item :style="{width: width + 'px',}" class="green-on-click "></el-menu-item>
        <el-menu-item  class="green-on-click card" style="margin-left: auto;display: flex;padding: 0 10px">
          <el-card style="height: 50px; width: 250px; display: flex; justify-content: center; align-items: center;border-radius: 50px 50px 50px 50px" class="gradient-card">
            <div style="color: white;font-size: 16px" >{{deadline4}}</div>
          </el-card>
        </el-menu-item>
        <el-menu-item class="green-on-click" style="margin-left: auto" ref="w2">
          <div style="display: flex; align-items: center;">
            <el-avatar :src="user.user.picture" style="margin-right: 10px;"></el-avatar>

            <span style="color: white">{{user.user.username}}</span>
            <el-dropdown>
              <i class="el-icon-arrow-down el-icon--right"></i>
              <el-dropdown-menu slot="dropdown" style="margin-top: 0px">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="change()">前往前台</el-dropdown-item>
                <el-dropdown-item @click.native="exit">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </el-menu-item>
<!--        主题样式-->
        <el-radio-group v-model="direction">
         <el-menu-item  class="green-on-click1" @click="drawer=true">
        <span ><i class="el-icon-loading"></i> </span>
          </el-menu-item>
        </el-radio-group>
      </el-menu>
    </el-header>
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
    >
      <template #title>
        <!-- 在这里放置自定义的内容 -->
        <el-divider >主题风格设置</el-divider>
      </template>
      <div style="padding: 20px">
        <div>侧边导航栏主题</div>
        <van-radio-group v-model="radio" direction="horizontal" style="margin-top: 10px" @change="handleChange">
          <van-radio v-for="items in colors" :key="items.id" :name="items" shape="square" :style="{backgroundColor:items}"></van-radio>
        </van-radio-group>

        <div style="margin-top: 10px">侧边导航栏字体主题</div>
        <van-radio-group v-model="radio2" direction="horizontal" style="margin-top: 10px" @change="handleChangefont">
          <van-radio v-for="items in colors" :key="items.id" :name="items" shape="square" :style="{backgroundColor:items}"></van-radio>
        </van-radio-group>

        <div style="margin-top: 10px">侧边导航栏选中主题</div>
        <van-radio-group v-model="radio3" direction="horizontal" style="margin-top: 10px" @change="handleChangefontSelect">
          <van-radio v-for="items in colors" :key="items.id" :name="items" shape="square" :style="{backgroundColor:items}"></van-radio>
        </van-radio-group>
      </div>

    </el-drawer>
    <el-container style="min-height: calc(100vh - 59px)" >
      <el-aside width="201px"  style="text-align: left;background-color: #334157;height: calc(100vh - 59px);border-right: 1px solid rgb(179 171 171)" :style="{ backgroundColor: asidebackgroundColor }">
        <el-menu style="width: 200px;" :class="{ 'active-menu': collapsed }" :collapse="collapsed"   router :menus="user.roleMenus" :default-active="$route.path"  class="el-menu-vertical-demo" :background-color="back">

         <div v-for="(item,i) in user.roleMenus" :key="item.id">
            <div v-if="item.path">
              <el-menu-item :index="item.path"  style="width: 200px">
                <i :class="item.icon"  class="menu-text subcolor-click"></i>
                <span slot="title"  class="menu-text subcolor-click" >{{item.name}}</span>
              </el-menu-item>
            </div>
            <div v-else>
              <el-submenu :index="item.id" ref="submenu" style="width: 200px">
                <template slot="title">
                  <i :class="item.icon" class="subcolor-click"></i>
                  <span class="subcolor-click">{{item.name}}</span>
                </template>
                <div v-for="(subitem,index) in item.children" :key="subitem.id">
                  <el-menu-item :index="subitem.path"  >
                    <i :class="subitem.icon"  class="subcolor-click" ></i>
                    <span slot="title" class="subcolor-click" >{{subitem.name}}</span>
                  </el-menu-item>
                </div>

              </el-submenu>
            </div>
          </div>

        </el-menu>
      </el-aside>
      <el-main style="height: calc(100vh - 59px)">
        <router-view  />
      </el-main>
    </el-container>
  </el-container>
</template>
<style scoped>
.card{
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-header {
  /*background-color: #000000;*/
  /*color: #ffffff;*/
  line-height: 60px;
}
>>> .el-main{
  padding: 0;
}

>>> .el-aside::-webkit-scrollbar {
  width: 0px!important;
}
>>> .el-menu{
  border-right: solid 0px #e6e6e6!important;
}
</style>
<script>
import request from "../utils/request";
import Vue from 'vue';
import { RadioGroup, Radio } from 'vant';

Vue.use(Radio);
Vue.use(RadioGroup);
export default {
  data(){
    return{
      asidebackgroundColor:localStorage.getItem("backecolor"),
      radio:localStorage.getItem("backecolor"),
      colors:['red','#409EFF','black','white','rgb(255 152 1)','rgb(48, 65, 86)','rgb(1, 143, 251)'],
      drawer: false,
      direction: 'rtl',
      back:localStorage.getItem("backecolor"),
      width: 0,
      collapsed:undefined,
      deadline4: '',
      user:{},
      heightw:'',
    }
  },
  mounted() {
    setTimeout(() => {
      let w1 = this.$refs.w1.$el.clientWidth;
      let w2 = this.$refs.w2.$el.clientWidth;
      this.width=this.$refs.w3.$el.clientWidth-w1-w2-300

    }, 100);

  },

  created() {
    this.checkColor()
    this.iflogin1()

  },
  methods:{
    handleChangefontSelect(color){
      localStorage.setItem("selectMenu",color)
      document.documentElement.style.setProperty('--selectMenu', localStorage.getItem("selectMenu"));
    },
    handleChangefont(color){//字体
      localStorage.setItem("subcolor",color)
      document.documentElement.style.setProperty('--subcolor', localStorage.getItem("subcolor"));
    },
    handleChange(color) {
      // 在这里处理选中变化事件
      localStorage.setItem("backecolor",color)
      this.back=localStorage.getItem("backecolor")//侧边上
      this.asidebackgroundColor=localStorage.getItem("backecolor")//侧边下
      // 获取对应的元素

      this.checkColor();
    },
    //样式
    checkColor(){
      if (!localStorage.getItem("backecolor")){
      localStorage.setItem("backecolor",'black')
      }
      if (!localStorage.getItem("subcolor")){
        localStorage.setItem("subcolor",'white')
      }
      if (!localStorage.getItem("selectMenu")){
        localStorage.setItem("selectMenu",'white')
      }
      document.documentElement.style.setProperty('--main-color', localStorage.getItem("backecolor"));
      document.documentElement.style.setProperty('--subcolor', localStorage.getItem("subcolor"));
      document.documentElement.style.setProperty('--selectMenu', localStorage.getItem("selectMenu"));
      this.back=localStorage.getItem("backecolor")
      this.asidebackgroundColor=localStorage.getItem("backecolor")//侧边下
    },
    change(){
      this.$router.push('/')
    },
    //登出
    exit(){
      request.get('/user/logout').then(resp=>{
      this.message("登出成功","success")
      })
      localStorage.removeItem("token")
      localStorage.removeItem("menus")
      localStorage.removeItem("user")
      this.$router.push("/login")
    },
    iflogin1(){
      let url = '/iflogin'
      request.get(url, {
        headers: {
          'content-type': 'application/json',
          "token": localStorage.getItem("token")  //token换成从缓存获取
        }
      }).then(resp => {
        if (resp.code === 200) {
          this.user=resp.data
          setInterval(() => {
            let weekDay = ''
            const now = new Date()
            const year = now.getFullYear()
            const month = (now.getMonth() + 1).toString().padStart(2, '0')
            const date = now.getDate().toString().padStart(2, '0')
            const hours = now.getHours().toString().padStart(2, '0')
            const minutes = now.getMinutes().toString().padStart(2, '0')
            const seconds = now.getSeconds().toString().padStart(2, '0')
            switch (now.getDay()) {
              case 0:
                weekDay = '星期日'
                break
              case 1:
                weekDay = '星期一'
                break
              case 2:
                weekDay = '星期二'
                break
              case 3:
                weekDay = '星期三'
                break
              case 4:
                weekDay = '星期四'
                break
              case 5:
                weekDay = '星期五'
                break
              case 6:
                weekDay = '星期六'
                break
            }
            this.deadline4 = `${year}-${month}-${date }  ${hours}:${minutes}:${seconds}  ${weekDay}`

          }, 1000)
          this.initWebSocket()

        }

      })
    },

    //   web socket 方法
    initWebSocket() {
      let username = JSON.parse(localStorage.getItem("user")).username;
      let avater=JSON.parse(localStorage.getItem("user")).picture;
      let url = 'ws://localhost:8090/webOnline/'+username
      let websock = new WebSocket(url);
      window.websock = websock; // 将WebSocket对象存储到全局变量中
      websock.onopen = () => {
        this.websocketonopen();
        // 发送消息
        let message1 = {
          fromId:JSON.parse(localStorage.getItem("user")).id,
          avatar:JSON.parse(localStorage.getItem("user")).picture,
          name:JSON.parse(localStorage.getItem("user")).username,
        }
        // 发给后端的数据需要字符串化
        websock.send(JSON.stringify(message1));
      };
      websock.onclose = this.websocketclose
    },
    //连接成功
    websocketonopen() {
      console.log('WebSocket连接成1功')

    },
    //关闭连接
    websocketclose(e) {

      console.log('断开连接', e)
    },
  }
}
</script>
<style scoped>
>>> .van-radio__icon--checked .van-icon {
  color: #fff;
  background-color: #1a589700;
  border-color: #1989fa00;
}
>>> .el-drawer__header{
  padding: 10px 0px 0;
  margin-bottom: 0px;
}
>>> .el-drawer{
  width: 20%!important;
}
.gradient-header1 {
  background: linear-gradient(to right, #030303, #f56076);
  background-size: 200% 200%;
  animation: gradient-animation 5s linear infinite;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-card {
  height: 50px;
  width: 170px;
  display: flex;
  border-color: rgba(0, 0, 0, 0);
  justify-content: center;
  align-items: center;
  border-radius: 50px 50px 50px 50px;
  animation: gradient-animation 5s linear infinite;
  background: linear-gradient(to right, #f44336, #2196f3, #4caf50);
  background-size: 200% 200%;
}
>>> .el-menu-item{
  padding: 0;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*顶部导航栏点击颜色*/
.green-on-click:focus,
.green-on-click:hover,
.is-active {
  background-color: rgba(0, 0, 0, 0) !important;
}
.green-on-click1:focus,
.green-on-click1:hover,
.is-active {
  background-color: rgba(161, 161, 161, 0.24) !important;
}
>>> .el-menu-item.is-active, .el-submenu.is-active {
  background-color: var(--selectMenu)!important;
  border-radius: 0px 30px 30px 0px;
  width: 200px;
}
>>> .el-menu-item.is-active .menu-text, .el-submenu.is-active .menu-text {
  color:var(--main-color)!important;

}
.subcolor-click{
  color: var(--subcolor);
}
>>> .el-card {
  margin: auto!important;
}

.el-menu-item.is-active .subcolor-click{
  color: var(--main-color);
}
:root {
  --main-color: #000000;
  --subcolor: #FFFFFFFF;
  --selectMenu: #999;
}
</style>
